<template>
    <div class="maxbox">
        <header class="headerh">
            <router-link class="out" to="/Home" tag="img" src="/static/img/return.png" alt=""></router-link>
            <div>专题</div>
            <router-link class="auto" to="/Home" tag="img" src="/static/img/more.png" alt=""></router-link>            
        </header>

        <div class="cnt">
            <img class="img-zhuan"   :src="array.img_src" alt="">

                <div class="lunbox">
                    <router-link :to="'/Lun/'+id" class="du">专题</router-link>
                    <router-link :to="'/Lun/'+id+'/Hua'" class="du">话题</router-link>
                </div>
            <router-view></router-view>
        </div>

        <footer class="fott">
            <div class="foimgbox">
                <img src="../../static/img/q_06.jpg" alt="">
                <div>收藏</div>
            </div>
            <div class="foimgbox">
                <img src="../../static/img/q_28.jpg" alt="">
                <div>分享</div>
            </div>

            <div class="can">
                <div>参与话题</div>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
    data(){
        return {
            id:this.$route.params.num,
            array: []
        }
    },
    mounted(){
        // console.log(this.$route.params.num)
         this.http('/item/menu/silder').then(res => {
        for(var i=0 ; i<res.data.length ; i++){

            if(this.$route.params.num == res.data[i].ID){
                this.array = res.data[i]
            }
        }
    })
    }
}
</script>

<style>

    html,body{
        height:100%;
        width: 100%;
    }


    .out{
        width: .7rem;
        margin-top: .2rem;
        height: 1.1rem;
    }

    .maxbox{
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .headerh{
        padding: 0 1rem;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        font-size: .8rem;
        background: #ff6767;
        width: 100%;
        height: 2.6rem;
        color: white;
    }

    .img-zhuan{
        width: 100%;
    }

    .auto{
        width: 1.3rem;
        height: 1rem;
    }
    .lunbox{
        display: flex;
        font-size: .75rem;
        color: black;
    }

    .du{
        width: 50%;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        margin-top: -.29rem;
        border-bottom: rgb(233, 227, 227) 1px solid;
        text-decoration: none;
        color: #000;
    }

    .du:hover{
        border-bottom: 2px solid red;
    }


    .cnt{
        flex: 1;
        overflow: auto;
        height: 100%;
    }


    .fott{
        width: 100%;
        height: 1.8rem;
        border-top: 1px solid #ccc;
        font-size: .54rem;
        text-align: center;
    }
    .fott img{
        width: 40%;
    }

    .can{
        font-size: .7rem;
        width: 50%;
        height: 100%;
    }
    .foimgbox{
        margin-top: .2rem;
    }

    .can div{
        width: 80%;
        background: #ff6767;
        height: 1.8rem;
        border-radius: 8px;
        text-align: center;
        line-height: 1.8rem;
        color: white;
        margin: 0 auto;
    }
</style>
